<script setup name="Post">
import { nextTick } from 'vue'
import getSearchConfig from './config/searchConfig'
import getContentConfig from './config/contentConfig.js'
import getDialogConfig from './config/dialogConfig.js'
import useDialog from '@/hooks/useDialog'
import getComputedConfig from '@/hooks/getPageConfig'
import { systemBaseUrl } from '@/api/config/base.js'
import to from "@/utils/to";
import {industryTreeSelect} from "@/api/basicdata/industry";
import UserDialog from '../components/UserDialog.vue'
import CustomerDialog from '../components/CustomerDialog.vue'

const { proxy } = getCurrentInstance()
const { sys_normal_disable, sys_user_sex, project_status } = proxy.useDict(
  'sys_normal_disable',
  'sys_user_sex',
  'project_status'
)

const pageName = 'project'
const requestBaseUrl = systemBaseUrl
const showPageSearch = ref(true)
const pageSearchRef = ref(null)
const pageContentRef = ref(null)
const descConfig = ref({})
const dialogHideItems = ref([])
const tableHideItems = ref([])


const industryOptions = ref([])
/** 查询行业下拉树结构 */
const getIndustryTree = async () => {
  const [err, res] = await to(industryTreeSelect())
  if (res) {
    industryOptions.value = res.data ?? []
  }
}

const dictMap = {
  status: sys_normal_disable,
  sex: sys_user_sex,
  industryId: industryOptions,
  projectStatus: project_status,
}
const searchConfig = getSearchConfig()
const searchConfigComputed = computed(() => {
  return getComputedConfig(searchConfig, dictMap)
})
const tableSelected = ref([])
const tableListener = {
  selectionChange: (selected) => {
    tableSelected.value = selected
  },
}
const contentConfig = getContentConfig()
const contentConfigComputed = computed(() => {
  contentConfig.hideItems = tableHideItems
  return contentConfig
})

const dialogConfig = getDialogConfig()

const dialogConfigComputed = computed(() => {
  dialogConfig.hideItems = dialogHideItems
  return getComputedConfig(dialogConfig, dictMap)
})

const addCallBack = () => {
  dialogHideItems.value.length = 0
}
const editCallBack = (item, type, res) => {
  console.log('item>>>: ', item, type)
  isEditMore.value = type
}
const isEditMore = ref(false)
const editMoreClick = () => {
  if (tableSelected.value.length > 0) {
    const data = tableSelected.value[0]
    pageContentRef.value?.editClick(data, true)
    nextTick(() => {
      const newArray = tableSelected.value.slice(1)
      dialogRef.value?.changeSelected(newArray)
    })
  }
}

const editNext = (data) => {
  pageContentRef.value?.editClick(data, true)
}

const [dialogRef, infoInit, addClick, editBtnClick] = useDialog(
  addCallBack,
  editCallBack,
  '添加'
)

const dialogWidth = ref('680px')
const searchData = computed(() => {
  return pageContentRef.value?.finalSearchData
})

const search = () => {
  pageSearchRef.value?.search()
}

const beforeSend = (queryInfo) => {}

const permission = {
  add: 'project:info:add',
  edit: 'project:info:edit',
  del: 'project:info:remove',
}

const triggerShowSearch = () => {
  showPageSearch.value = !showPageSearch.value
}

const onChangeShowColumn = (filterArr) => {
  tableHideItems.value = filterArr
}

/** 导出按钮操作 */
const handleExport = () => {
  proxy.download(
    'system/post/export',
    {
      ...searchData.value,
    },
    `post_${new Date().getTime()}.xlsx`
  )
}

const dialogVisible = ref(false)
const customerDialogVisible = ref(false)
const marketerDialogVisible = ref(false)

const clickSelectUser = () => {
  dialogVisible.value = true
}
const clickSelectCustomer = () => {
  customerDialogVisible.value = true
}
const clickSelectMarketer = () => {
  marketerDialogVisible.value = true
}

const allocationMarkter = (items) => {
  if(items){
    marketerDialogVisible.value = false
  }

  //由于一个客户当前只允许属于一个销售，因此只获取第一个。
  let userId = items[0].userId
  let nickName = items[0].nickName


  // infoInit.value.marketerId = userId
  // infoInit.value.marketerName = nickName

  dialogRef.value?.setFormData('marketerId', userId)
  dialogRef.value?.setFormData('marketerName', nickName)


  console.log('infoInit.value>>>', infoInit.value)



}

const allocationCustomer = (items) => {
  if(items){
    customerDialogVisible.value = false
  }

  //由于一个项目当前只允许属于一个客户，因此只获取第一个。
  let customerId = items[0].customerId
  let customerName = items[0].name


  // infoInit.value.marketerId = userId
  // infoInit.value.marketerName = nickName

  dialogRef.value?.setFormData('customerId', customerId)
  dialogRef.value?.setFormData('customerName', customerName)


  console.log('infoInit.value>>>', infoInit.value)

}


const init = () => {
  getIndustryTree()
}

init()
</script>
<template>
  <div class="default-main page">
    <PageSearch
      v-show="showPageSearch"
      ref="pageSearchRef"
      :pageName="pageName"
      :searchConfig="searchConfigComputed"
    ></PageSearch>
    <PageContent
      ref="pageContentRef"
      :pageName="pageName"
      :contentConfig="contentConfigComputed"
      :descConfig="descConfig"
      :showPageSearch="showPageSearch"
      :dictMap="dictMap"
      :tableListener="tableListener"
      :tableSelected="tableSelected"
      :permission="permission"
      :requestBaseUrl="requestBaseUrl"
      @beforeSend="beforeSend"
      @addClick="addClick"
      @editBtnClick="editBtnClick"
      @onChangeShowColumn="onChangeShowColumn"
      @triggerShowSearch="triggerShowSearch"
      @editMoreClick="editMoreClick"
    >
      <template #deptSlot="{ backData }">
        <span> {{ backData.industry?.industryName}}</span>
      </template>
      <template #projectStatusSlot="{ backData }">
        <dict-tag :options="project_status" :value="backData.projectStatus"/>
      </template>
    </PageContent>
    <PageDialog
      ref="dialogRef"
      :width="dialogWidth"
      :pageName="pageName"
      :dialogConfig="dialogConfigComputed"
      :infoInit="infoInit"
      :search="search"
      :isEditMore="isEditMore"
      :requestBaseUrl="requestBaseUrl"
      @editNext="editNext"
    >
      <template #customerNameCustom="{ backData }">
        <div class="marketer-container">
          <div class="marketer-name">{{backData.formData.customerName ? backData.formData.customerName: '无'}}</div>
          <el-button type="primary" @click="clickSelectCustomer">请选择</el-button>
        </div>
      </template>
      <template #marketerNameCustom="{ backData }">
        <div class="marketer-container">
          <div class="marketer-name">{{backData.formData.marketerName ? backData.formData.marketerName: '无'}}</div>
          <el-button type="primary" @click="clickSelectMarketer">请选择</el-button>
        </div>
      </template>
    </PageDialog>
    <UserDialog
      v-model="marketerDialogVisible"
      @saveSuccess="allocationMarkter"
    ></UserDialog>
    <CustomerDialog
      v-model="customerDialogVisible"
      @saveSuccess="allocationCustomer"
    ></CustomerDialog>
  </div>
</template>

<style scoped lang="scss">
  .page {
    :deep(.statusClass .el-radio-group) {
      width: 100%;
      justify-content: space-between;
      .el-radio {
        margin-right: 0;
      }
    }
    :deep(.del) {
      margin-left: 12px;
    }
    .marketer-container{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .marketer-name{
      width: 80px;
    }
  }
</style>
